<!DOCTYPE html>
<html lang="en" id="html">
  <head id="head">
    <meta charset="UTF-8" id="meta"> 
    <title id="title">nodeName,nodeValue</title>
  </head>
  <body id="body">
    <!--nodeName,nodeValue-->
    <div id="container">这是一个元素节点</div>
    <script id="scrpit">
      var documentCount = 0;
      /**
      * 使用log方法打印出此页面包含的所有节点的 nodeName 和 nodeType (换行符除外)
      **/

      // var divElement = document.getElementById("container");
      // log("div ",divElement);

      var htmlElement = document.getElementById("html");
      for(var i=0;i<htmlElement.childNodes.length;i++){
        var htmlChildNode = htmlElement.childNodes[i];
        log(htmlChildNode.nodeName.toLocaleLowerCase(),htmlChildNode);
        var htmlChildNodeElement = document.getElementById(''+htmlChildNode.nodeName.toLocaleLowerCase());
        if(htmlChildNodeElement != null){
          for(var j=0;j<htmlChildNodeElement.childNodes.length;j++){
            var htmlChildNodeChild = htmlChildNodeElement.childNodes[j];
            log(htmlChildNodeChild.nodeName.toLocaleLowerCase(),htmlChildNodeChild);
          }

        }
        
      }
      
      // var headElement = document.getElementById("head");
      // log("head",headElement);

      // var metaElement = document.getElementById("meta");
      // log("meta",metaElement);

      // var bodyElement = document.getElementById("body");
      // log("body",bodyElement);

      // var comment = bodyElement.firstChild;
      // log("comment",comment);

      // var titleElement = document.getElementById("title");
      // log("title",titleElement);

      // var scrpitElement = document.getElementById("scrpit");
      // log("scrpit",scrpitElement);


      console.log("共有node节点："+documentCount+"个");


      function log(explanation,node){
        var strArr = [];
        strArr.push("节点位置: [ "+explanation+" ]");
        strArr.push("节点名字: "+node.nodeName);
        strArr.push("节点类型: "+node.nodeType);
        documentCount++;
        console.log(strArr.join("  "));
      }
      
    </script> 
  </body>
</html>